.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  background: url(../common/images/bg_img.png) repeat-y;
}
.head_portrait {
  position: relative;
  width: 100%;
  height: 2.75rem;
  background: url(../common/images/head_bg.png);
  .left {
    .flex_center();
    width: 60%;
    height: 100%;
    .head_me {
      .flex_center();
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 50%;
      border: 0.05rem solid rgba(158, 138, 143, 0.5);
      background-color: #fff;
      img {
        height: 0.44rem;
      }
    }
    .head_name {
      font-size: 0.36rem;
      color: #fff;
      margin-left: 0.4rem;
    }
  }
  .right {
    position: absolute;
    right: 0.2rem;
    bottom: 0.2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span {
      font-size: 0.2rem;
      color: #c4c4c4;
    }
    img {
      height: 0.2rem;
      margin-left: 0.15rem;
    }
  }
}

.main {
  width: 100%;
  padding: 0.2rem;
  .items {
    width: 100%;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 0.8rem;
      background-color: #fff;
      border: 1px solid #d0ced0;
      &:nth-of-type(1) {
        margin-bottom: 0.2rem;
      }
      .left {
        display: flex;
        justify-content: space-around;
        width: 1.95rem;
        height: 100%;
        .icon {
          .flex_center();
          height: 100%;
          img {
            height: 0.3rem
          }
        }
        .text {
          .flex_center();
          font-size: 0.26rem;
          color: #606060;
        }
      }
      .right {
        .flex_center();
        height: 100%;
        margin-right: 0.2rem;
        img {
          width: 0.16rem;
        }
      }
    }
  }
}



















